<template>
  <div class="common-body">
    <!-- 面包屑 -->
    <breadcrumb
      :breadcrumbArr="breadcrumbArr"
      :breadcrumbLastItem="breadcrumbLastItem"
      state="detail"
      @handleBack="handleBack"
    />
    <div
      v-if="isTrue"
      :class="[
        contractState ? 'ccui-app-container-detail' : 'detail-box',
        'ccui-clearfix'
      ]"
    >
      <!--  主体左侧内容  -->
      <div :class="[!contractState ? 'detail-info' : '']">
        <!--  审批状态 icon  -->
        <div v-if="!contractState" class="detail-info-el-Label">
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div
          :class="[
            !contractState
              ? 'detail-info-form-container'
              : 'ccui-app-container-detail-body'
          ]"
        >
          <el-tabs v-model="activeName" class="el-tabs__customize">
            <!--  基本信息  -->
            <el-tab-pane label="基本信息" name="first">
              <detailBaseInfo
                ref="basicInfo"
                labelWidth="130px"
                :formList="baseFormList"
                :detail="basicInfo"
              />
            </el-tab-pane>
            <!--  财务信息  -->
            <el-tab-pane label="财务信息" name="second">
              <financeInfo ref="financial" :detail="financial" />
            </el-tab-pane>
            <!-- 采购清单 -->
            <el-tab-pane label="采购清单" name="third">
              <oneLineTable
                ref="purchaseList"
                showSummary
                :summaryArr="summaryArr"
                :tableTheadOptions="baseJsObj.purchaseTableThead"
                :oneLineTableData="purchaseList"
              />
            </el-tab-pane>
            <!-- 使用范围 -->
            <el-tab-pane label="使用范围" name="fourth">
              <oneLineTable
                ref="usingRange"
                :tableTheadOptions="baseJsObj.useRangeTableThead"
                :oneLineTableData="usingRange"
              />
            </el-tab-pane>
            <!-- 付款方式 -->
            <el-tab-pane label="付款方式" name="fifth">
              <paymentMode :detail="componentsDatil"></paymentMode>
            </el-tab-pane>
            <!-- 合同附件 -->
            <el-tab-pane label="合同附件" name="sixth">
              <contractAnnex
                ref="contractAnnex"
                isTab
                v-model="attachmentDownload"
                state="detail"
              />
            </el-tab-pane>
            <!-- 协议信息 -->
            <el-tab-pane label="协议信息" name="seventh">
              <agreementInfo
                :componentsDatil="componentsDatil"
                ref="agreementInfo"
              />
            </el-tab-pane>
            <!-- 协议历史 -->
            <el-tab-pane label="协议历史" name="eighth">
              <oneLineTable
                :highlightNodeArr="['protocolCode']"
                :tableTheadOptions="baseJsObj.histryAgreementTableThead"
                :oneLineTableData="histryAgreement"
                @gotoDetail="goAgreementHistory"
              />
            </el-tab-pane>
            <!-- 变更历史 -->
            <el-tab-pane label="变更历史" name="ninth">
              <oneLineTable
                :highlightNodeArr="['contractCode']"
                :tableTheadOptions="baseJsObj.histryChangesTableThead"
                :oneLineTableData="histryChanges"
                @gotoDetail="goContractHistory"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!--  右边审批状态  -->
      <approval-read-record
        v-if="!contractState"
        :approvalRecordData="approvalRecordData"
      />
    </div>
    <!--  底部导航栏及签名导出  -->
    <bottomGuide
      v-if="isTrue"
      busiType="122"
      pageType="smpequipment/detailExport"
      :approvalStatus="approving"
      :curPageId="$route.query.concId"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import baseJsObj from "../js";
// import contractComponent from "@/app/contractManagement/components";

import financeInfo from "../components/financeInfo.vue";
import paymentMode from "../components/paymentMode.vue";
import agreementInfo from "../components/agreementInfo.vue";

import publicComponent from "@/basa/components/public";
import {
  getEquipmentProtocolConcDetail,
  getEquipmentNormalConcDetail
} from "../api";
import { proxyDateFormat } from "@/basa/utils";
export default {
  components: {
    financeInfo,
    paymentMode,
    agreementInfo,
    // financeInfo: contractComponent.detailFinanceInfo,
    // paymentMode: contractComponent.detailPaymentMode,
    // agreementInfo: contractComponent.detailAgreementInfo,
    breadcrumb: publicComponent.breadcrumb,
    detailBaseInfo: publicComponent.detailBaseInfo,
    oneLineTable: publicComponent.oneLineTable,
    contractAnnex: publicComponent.uploadInfo,
    bottomGuide: publicComponent.bottomGuide,
    approvalReadRecord: publicComponent.approvalRecord
  },
  data() {
    return {
      baseJsObj,
      breadcrumbLastItem: "",
      businessCode: "",
      isTrue: false,
      baseFormList: [],
      financial: [],
      purchaseList: [],
      usingRange: [],
      paymentMode: [],
      componentsDatil: [],
      attachmentDownload: [],
      agreementInfo: {},
      histryAgreement: [],
      histryChanges: [],
      attachmentUpload: [],
      focus: "basicInfo",
      activeName: "first",
      basicInfo: {}, //基本信息
      // concId: "", //合同id
      summaryArr: [
        "currentNum",
        "currentChangeAmtExcludeTax",
        "currentChangeAmtIncludeTax",
        "rate"
      ],
      approvalRecordData: [],
      approvingType: {
        0: "pending", //待审批
        1: "approving", // 审批中
        3: "approvaled", // 审批通过
        4: "sendback", // 已退回
        2: "withdrawn" // 已撤回
      },
      approving: "", // 审批状态
      approvingStatus: true, // 审批状态展示
      contractState: "",
      breadcrumbArr: []
    };
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      const { concId, protocolId, type } = this.$route.query;
      const arr = cloneDeep(baseJsObj.breadcrumbArr);
      // 设置面包屑
      if (type && type === "account") {
        arr.splice(2, 1, {
          path: "/contractManagement/equipmentContractParameterList/index",
          text: "运输合同台账"
        });
      }
      this.breadcrumbArr = arr;
      // 请求详情参数
      const data = {
        concId,
        proConId: protocolId ?? "",
        isShowWorkflow: "1"
      };
      this.getDetails(data);
    },
    // 详情
    getDetails(data) {
      (this.$route.query.type === "account"
        ? getEquipmentNormalConcDetail
        : getEquipmentProtocolConcDetail)(data).then(res => {
        if (res.data.code == 0) {
          const data = res.data.data;
          // 获取businessCode
          this.businessCode = data.smpPcConc.contractCode;
          this.componentsDatil = res.data.data;
          const jsFormList = cloneDeep(baseJsObj.baseFormList);
          // 币种判断
          console.log(data.smpPcConc);
          if (data.smpPcConc.currencyName === "人民币") {
            const i = jsFormList.findIndex(
              _ => _.titleContent === "chExchangeRate"
            );
            jsFormList.splice(i, 1);
            const j = jsFormList.findIndex(
              _ => _.titleContent === "exchangeRateRefDate"
            );
            jsFormList.splice(j, 1);
          }
          // 兑美元美元汇率
          if (
            data.smpPcConc.isOverseas !== 3 &&
            !["人民币", "美元"].includes(data.smpPcConc.currencyName)
          ) {
            const i = jsFormList.findIndex(
              _ => _.titleContent === "compileUser"
            );
            jsFormList.splice(i, 0, {
              label: "兑美元汇率",
              titleContent: "usExchangeRate"
            });
          }
          // 多税率判断
          if (data.smpPcConc.multiRateCode === 0) {
            const i = jsFormList.findIndex(
              _ => _.titleContent === "taxRatePercent"
            );
            jsFormList.splice(i, 1);
          }

          // 是否浮动合同价格判断
          if (data.smpPcConc.isFloatContractPrice === 1) {
            const i = jsFormList.findIndex(_ => _.titleContent === "floatDesc");
            jsFormList.splice(i, 1);
          }
          this.baseFormList = jsFormList;
          this.breadcrumbLastItem = res.data.data.smpPcConc.contractName;
          data.smpPcConc = {
            ...data.smpPcConc,
            compileDateStr:
              data.smpPcConc.compileDate !== null
                ? data.smpPcConc.compileDate.substring(0, 10)
                : "",
            exchangeRateRefDate:
              data.smpPcConc.exchangeRateRefDate !== null
                ? data.smpPcConc.exchangeRateRefDate.substring(0, 10)
                : "",
            // 是否浮动合同价格
            isFloatContractPrice: baseJsObj.whetherList.find(
              _ => _.dicKey === data.smpPcConc.isFloatContractPrice
            ).dicValue,
            // 是否海外采购
            isOverseas: baseJsObj.isOverseasList.find(
              _ => _.value === data.smpPcConc.isOverseas
            ).label,
            // 多税率
            multiRateCode:
              data.smpPcConc.multiRateCode !== null
                ? baseJsObj.whetherList.find(
                    _ => _.dicKey === data.smpPcConc.multiRateCode
                  ).dicValue
                : ""
          };
          this.basicInfo = data.smpPcConc;
          this.titleName = data.smpPcConc.contractName;
          this.financial = data.pcFinance;
          this.basicInfo.contractPerson = this.financial[0].contractPerson;
          this.basicInfo.contractPersonTel = this.financial[0].contractPersonTel;
          this.purchaseList = res.data.data.smpConcMatLessList;
          this.purchaseList.forEach(item => {
            item.currentNum = Number(item.currentNum).toFixed(3);
            item.currentChangeAmtExcludeTax = Number(
              item.currentChangeAmtExcludeTax
            ).toFixed(2);
            item.currentUnitPriceExcludeTax = Number(
              item.currentUnitPriceExcludeTax
            ).toFixed(2);
            item.currentUnitPriceIncludeTax = Number(
              item.currentUnitPriceIncludeTax
            ).toFixed(2);
            item.currentChangeAmtIncludeTax = Number(
              item.currentChangeAmtIncludeTax
            ).toFixed(2);
            item.rate = Number(item.rate).toFixed(2);
            item.PlaceDelivery =
              item.deliveryAreaName +
              item.provinceName +
              item.cityName +
              item.countyName +
              item.deliveryPoints;
          });
          this.usingRange = res.data.data.smpUsableRange.map(n => ({
            ...n,
            operationTimeStr:
              n.operationTime !== null ? proxyDateFormat(n.operationTime) : ""
          }));
          this.paymentMode = res.data.data.payTypeListBOS;
          this.attachmentDownload = res.data.data.concFiles;
          this.histryChanges = res.data.data.oldSmpPcConcList.map(n => ({
            ...n,
            compileDateStr:
              n.compileDate !== null ? proxyDateFormat(n.compileDate) : ""
          }));
          this.histryAgreement = res.data.data.smpProtocolList;
          if (this.state == "edit") {
            this.agreementInfo = res.data.data.smpProtocol;
            this.attachmentUpload = res.data.data.protocolConcFiles;
          }
          // 审批
          this.approving = this.approvingType[
            (data.smpProtocol || data.smpPcConc).checkState
          ];
          this.contractState = data.smpProtocol?.protocolState === "12";
          this.approvalRecordData = data.approveRecords;
          this.approvingStatus = false;
          this.isTrue = true;
          this.$nextTick(() => {
            this.approvingStatus = true;
          });
        }
      });
    },

    // 协议历史
    goAgreementHistory({ id, concId }) {
      this.$router.push({
        path: `/contractManagement/materialRentContractAgreement/item-detail`,
        query: {
          concId,
          protocolId: id,
          type: "account"
        }
      });
    },

    // 变更历史
    goContractHistory({ id, protocolId }) {
      this.$router.push({
        path: `/contractManagement/materialRentContractAgreement/item-detail`,
        query: { concId: id, protocolId, type: "account" }
      });
    },

    //返回
    handleBack() {
      this.$router.go(-1);
    }
  },
  deactivated() {
    this.activeName = "first";
    this.isTrue = false;
  }
};
</script>

<style scoped lang="scss"></style>
